<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
        <meta name="author" content="order by dede58.com"/>
		<title>我的购物车-小米商城</title>
		<link rel="stylesheet" type="text/css" href="./css/style.css">
		
		<link rel="stylesheet" type="text/css" href="./css/reset.css">
		<link rel="stylesheet" type="text/css" href="./css/main.css">	
	</head>
	<body>
	<!-- start header -->
	<!--end header -->

<!-- start banner_x -->
		<div class="banner_x center">
			<a href="./index.jsp" target="_blank"><div class="logo fl"></div></a>
			
			<div class="wdgwc fl ml40">我的购物车</div>
			<div class="wxts fl ml20">温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</div>
			<div class="dlzc fr">
				<c:if test="${empty user}">
					<div class="login_btn left fl">
						<a href="login.jsp" style="color:#B0B0B0;">登录</a>
						<span>|</span>
						<a href="register.jsp" style="color:#B0B0B0;">注册</a>
					</div>
				</c:if>	
				<c:if test="${not empty user}">
					<span style="color:#B0B0B0;margin-right:10px;">欢迎您：${user.uname}</span>
					<a href="user_center_info.jsp" style="color:#B0B0B0;">个人中心</a>
				</c:if>
				
			</div>
			<div class="clear"></div>
		</div>
		<div class="xiantiao"></div>
		
		<div class="total_count">全部商品<em>${cartinfo.size()}</em>件</div>	
		<table id="goodsTable"  class="cart_list_th clearfix">
			<tr>
				<th class="col01">商品名称</th>
				<th class="col01">商品编号</th>
				<th class="col03">单价</th>
				<th class="col04">数量</th>
				<th class="col05">小计</th>
				<th class="col06">操作</th>
			</tr>
		</table>
		<c:forEach var="cartinfos" items="${cartinfo}" varStatus="i">
			<ul class="cart_list_td clearfix">
				<li class="col01"><input type="checkbox" name="checked"></li>
				<li class="col02">
					<img src="./${cartinfos.pic}">
				</li>
				<li class="col03">${cartinfos.tname}</li>
				<li class="col04">${cartinfos.cid}</li>
				<li class="col05">${cartinfos.price}元</li>
				<li class="col06">
					<div class="num_add">
						<a href="javascript:void(0);" class="add fl" onclick="changeNum(1,${cartinfos.gid},this)">+</a>
						<input type="text" class="num_show fl" value="${cartinfos.num}" id="num">	
						<a href="javascript:void(0);" class="minus fl" onclick="changeNum(-1,${cartinfos.gid},this)">-</a>	
					</div>
				</li>
				<li class="col07">${cartinfos.allprice}元</li>
				<li class="col08"><a href="javascript:void(0);" onclick="del(this,${cartinfos.gid})">删除</a></li>
			</ul>
		</c:forEach>
		</div>
	
		<ul class="settlements">
			<li class="col01">
				<input type="checkbox" name="" id='checkall'>
			</li>
			<li class="col02">全选  &nbsp;&nbsp;&nbsp;<a href="index.jsp">继续购物</a></li>
			<li class="col03">合计(不含运费)：<span>¥</span><em id="tp">0</em><br>共计<b id="tn">0</b>件商品</li>
			<li class="col04"><a href="javascript:void(0);" onclick="toCount()">去结算</a></li>
		</ul>

  

	
	<!-- footer -->
	<footer class="center">
			
			<div class="mt20">小米商城|MIUI|米聊|多看书城|小米路由器|视频电话|小米天猫店|小米淘宝直营店|小米网盟|小米移动|隐私政策|Select Region</div>
			<div>mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2014]0059-0009号</div> 
			<div>违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</div>
		</footer>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>	
	<script>
		//一进入购物车界面就应该判断是否已经登录  若没有登录  直接调登录界面
		if( $(".login_btn").html() ){
				//提示用户先登录
				alert("请先登录");
				location.href="login.jsp";
			}
		
		
		
		//数量加减计算
		function changeNum(num,gid,thas){
			var num=parseInt(num);
			var gid=parseInt(gid);
			//原先的数量
			var myul = $(thas).parent().parent().parent();
			var oldNum=parseInt(myul.find(".num_show").val());
			if( oldNum+num<1){
				oldNum=1;
				return;
			}else{
				oldNum+=num;
			}
			
			//发ajax请求更新数量
			$.post("cartinfoServlet",{
				op:"updateNum",
				gid:gid,
				num:oldNum
			},function(data){
				if(data>0){
					location.reload();
				}else{
					alert("修改失败");
				}
			},"text");
		}
	
		//删除购物车的商品
		function del(that,gid){
			//发ajax请求进行修改cartinfoServlet
			$.post("cartinfoServlet",{
				op:"del",
				gid:gid
			},function(data){
				if(data>0){
					alert("删除成功");
					location.reload();
				}else{
					alert("删除失败");
				}
			},"text");
		}
		
		function checkBoxOnClick(tableId, checkAllName, name) {
		    $("#" + tableId + " tbody").on("click","tr td input[name='" + name + "']",
		        function() {
		            if ($(this).is(":checked") == true) {
		                // 如果当前框被选中，则判断是否需要勾选全选框
		                var checkbox = $("input[name='" + name + "']");
		                var length = $(checkbox).length;
		                if (length > 0) {
		                    for (var i = 0; i < length; i++) {
		                        if ($(checkbox[i]).is(":checked") != true) {
		                            break;// 如果有未勾选的选择框，不需要勾选全选，跳出循环
		                        }
		                        if (i == length - 1) {
		                            // 如果到最后一个选择框仍然是勾选状态，即所有选择框都被勾选，则勾选全选框
		                            $("input[name='" + checkAllName + "']")
		                                    .prop("checked", true);
		                            $("input[name='" + checkAllName + "']")
		                                    .prop("title", "全不选");
		                        }
		                    }
		                }
		            } else {
		                // 如果当前选择框未勾选，则取消全选框勾选状态
		                $("input[name='" + checkAllName + "']").prop(
		                        "checked", false);
		                $("input[name='" + checkAllName + "']").prop(
		                        "title", "全选");
		            }
		        }
		    );
		}
		
		/*
		//勾选商品和不勾选商品
		//获取ul 里面  checkbox的个数
		var count=$('input[name="checked"]').length;
		var a=0;
		$(".col01 input").on("click",function(){
			console.log($(".col01 input"));
			var num=0;
			var price=0;
			//每点一次就要获取判断
			a++;
			if(parseInt(a)==parseInt(count)){
				$("#checkall").prop("checked",true);
			}else{
				$("#checkall").prop("checked",false);
			}
			$('input[name="checked"]:checked').each(function(){
			    //获取数量
			   	num+=parseInt($(this).parent().parent().find(".num_show").val());
			    //获取勾选的单价
				price+=parseInt($(this).parent().parent().find(".col07").html());
			});
			$("#tp").html(price);
			$("#tn").html(num);
		});
		*/
		// 结算页面全选按钮事件---全选反选
		$('#checkall').on("click",function(){
			if($(this).prop('checked')){
			$('input[name="checked"]').each(
					function(){
						$(this).prop("checked",true);
						countAjax()
					});
			}else{
				$('input[name="checked"]').each(function(){
			    	$(this).prop("checked",false);
					$("#tp").html(0);
					$("#tn").html(0);
			 });
		 	}
		});
		
		//计算数量的ajax请求
		function countAjax(){
			//发ajax请求求总和和计算数量
			var allNum=0;
			var allPrice=0;
			$.post("cartinfoServlet",{
				op:"countAll"
			},function(data){
				if(data.length>0){
					for(var i=0;i<data.length;i++){
						allNum+=parseInt(data[i].num);
						allPrice+=parseInt(data[i].allprice);
					}
				}
				
				$("#tp").html(allPrice);
				$("#tn").html(allNum);
			},"json");
		}

		//去结算
		function toCount(){
			if($("#tp").html()<=0){
				alert("你暂无勾选商品");
				location.href="gouwuche.jsp";
			}else{
				var str='';
				//如果这个商品被选中 就把cid传过去
				$('input[name="checked"]:checked').each(function(){
				    //获取勾选的商品的cid
				    cid=parseInt($(this).parent().parent().find(".col04").html());
				    str+=',cid='+cid;
				});
				
				location.href="place_order.jsp?"+str;
			}
		}
	</script>
	</body>
</html>
